<template>
    <div class="mechanismPriceChange">
        <div class="header">
            <van-nav-bar title="变价直播机制" left-arrow @click-left="handleLeft"></van-nav-bar>
        </div>
        <div class="add_product">
            <div class="investmentReview_loading" v-if="loadingShow">
                <van-loading />
                <div class="investmentReview_loading_title">加载中...</div>
            </div>
            <van-form @submit="onSubmit" v-if="!loadingShow" validate-first scroll-to-error>

                <div class="form_item card_box">
                    <van-cell-group inset>
                        <van-field name="styleName" label="商品名称" v-model="queryParams.styleName"
                            @input="(e) => { forbidRule(e, 'styleName', 'blank') }" placeholder="请输入"
                            input-align="right" error-message-align="right" required maxlength="50" :rules="[
                                { required: true, trigger: 'onBlur', message: '请输入商品名称' }
                            ]" />
                    </van-cell-group>
                    <van-cell-group inset>
                        <van-field input-align="right" error-message-align="right" name="specs" label="规格/材质"
                            v-model="queryParams.specs" placeholder="请输入" required maxlength="200" :rules="[
                                { required: true, trigger: 'onBlur', message: '请输入规格/材质名称' },
                            ]" @input="(e) => { forbidRule(e, 'specs', 'emoji') }" />
                    </van-cell-group>
                    <van-cell-group inset>
                        <van-field v-model="queryParams.sellingPoints" input-align="right" error-message-align="right"
                            name="sellingPoints" maxlength="189" rows="1" autosize label="卖点"
                            @input="(e) => { forbidRule(e, 'sellingPoints', 'emoji') }" placeholder="请输入卖点" required
                            :rules="[
                                { validator: validSpace, message: '请输入卖点' }
                            ]" />
                    </van-cell-group>
                    <formNumberKeyboard :formRef="formRef" name="tax" label="平台扣点" v-model:keyValue="queryParams.tax"
                        placeholder="请输入" required :rules="[
                            { required: true, trigger: 'onBlur', message: '请输入平台扣点' },
                            {
                                validator: validatorcommission,
                                message: '请输入正确内容：整数或者保留两位小数',
                            },
                        ]" extraKey=".">
                        <div style="display: flex;align-items: center;">
                            <span style="margin-right: 5px;">%</span>
                            <PointButton @onClick="isPoint = true" />
                        </div>
                    </formNumberKeyboard>
                    <div class="image-title">
                        商品图
                    </div>
                    <van-cell-group inset>
                        <van-field name="商品图" label="" v-model="queryParams.productImage">
                            <template #input>
                                <UpLoadDom :arr="productImageList || []" @deleteClick="deleteImg"
                                    @postImageClick="postImage('productImage', 5)" :max-count="5" :isPdfLook="true" />
                            </template>
                        </van-field>
                    </van-cell-group>
                </div>


                <!-- 机制 -->
                <messageBox class="mess_card mt-10">
                    <template #titleBox>
                        <div class="message_title_box">
                            <div class="chilunimg"></div>
                            <div class="jz1_img"></div>
                        </div>
                    </template>
                    <div class="form_item">
                        <van-cell-group inset>
                            <van-field input-align="right" error-message-align="right" name="cooperationMode"
                                label="合作方式" v-model="queryParams.cooperationMode" readonly placeholder="请选择"
                                @click="showCooperationMode = true" required :rules="[
                                    { required: true, trigger: 'onBlur', message: '请选择合作方式' },
                                ]">
                                <template #input>
                                    <van-radio-group v-model="queryParams.cooperationMode" direction="horizontal">
                                        <van-radio v-for="item in cooperationModeColumns" :key="item.value"
                                            :name="item.value">{{
                                                item.text }}</van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                        </van-cell-group>
                        <formNumberKeyboard :formRef="formRef" v-if="queryParams.cooperationMode == '分佣'" name="price"
                            label="售价" v-model:keyValue="queryParams.price" placeholder="请输入" required :rules="[
                                { required: true, trigger: 'onBlur', message: '请输入售价' },
                                {
                                    validator: validatorNumber,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey="." />
                        <van-cell-group inset v-if="queryParams.cooperationMode == '分佣'">
                            <van-field input-align="right" error-message-align="right" name="costPrice" label="成本"
                                v-model="queryParams.costPrice" readonly required placeholder="请输入" />
                        </van-cell-group>
                        <formNumberKeyboard v-else :formRef="formRef" name="costPrice" label="成本"
                            v-model:keyValue="queryParams.costPrice" placeholder="请输入"
                            :required="queryParams.cooperationMode == '供货'" :rules="[
                                {
                                    validator: validatorNumbercostPrice,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey="." />
                        <formNumberKeyboard :formRef="formRef" v-if="queryParams.cooperationMode == '分佣'"
                            name="commission" label="佣金" v-model:keyValue="queryParams.commission" placeholder="请输入"
                            required :rules="[
                                { required: true, trigger: 'onBlur', message: '请输入佣金' },
                                {
                                    validator: validatorcommission,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey=".">
                            %
                        </formNumberKeyboard>
                        <formNumberKeyboard :formRef="formRef" v-if="queryParams.cooperationMode == '分佣'"
                            name="brokerage" label="补充佣金" v-model:keyValue="queryParams.brokerage" placeholder="请输入"
                            :rules="[
                                {
                                    validator: validatorbrokerage,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey=".">
                            %
                        </formNumberKeyboard>
                        <van-cell-group inset>
                            <van-field input-align="right" error-message-align="right" name="liveStreamingMechanism"
                                label="机制" maxlength="12" v-model="queryParams.liveStreamingMechanism"
                                @input="(e) => { forbidRule(e, 'liveStreamingMechanism', 'blank') }" placeholder="请输入"
                                required :rules="[
                                    { required: true, trigger: 'onBlur', message: '请输入机制' },
                                ]" />
                        </van-cell-group>
                    </div>
                </messageBox>
                <div class="add_jizhi_bt" @click="addMechanism(2)" v-if="mechanismArr.length == 1">
                    <div class="add_img"></div>
                    <div>添加机制</div>
                </div>
                <messageBox class="mess_card mt-10" v-if="mechanismArr.indexOf(2) !== -1">
                    <template #titleBox>
                        <div class="message_title_box">
                            <div class="chilunimg"></div>
                            <div class="jz2_img"></div>
                        </div>
                    </template>
                    <div class="form_item">
                        <van-cell-group inset>
                            <van-field input-align="right" error-message-align="right" name="cooperationMode2"
                                label="合作方式" v-model="queryParams.cooperationMode2" is-link readonly placeholder="请选择"
                                clearable @click="showCooperationMode2 = true" :rules="[
                                    { required: false, trigger: 'onBlur', message: '请选择合作方式' },
                                ]">
                                <template #input>
                                    <van-radio-group v-model="queryParams.cooperationMode2" direction="horizontal">
                                        <van-radio v-for="item in cooperationModeColumns" :key="item.value"
                                            :name="item.value">{{
                                                item.text }}</van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                        </van-cell-group>
                        <formNumberKeyboard :formRef="formRef" v-if="queryParams.cooperationMode2 == '分佣'" name="price2"
                            label="售价" v-model:keyValue="queryParams.price2" placeholder="请输入"
                            :required="queryParams.cooperationMode2 == '分佣'" :rules="[
                                { validator: validators2, message: '请输入售价' },
                                {
                                    validator: validatorNumber2,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey="." />
                        <van-cell-group inset v-if="queryParams.cooperationMode2 == '分佣'">
                            <van-field input-align="right" error-message-align="right" name="costPrice2" label="成本"
                                v-model="queryParams.costPrice2" readonly required placeholder="请输入" />
                        </van-cell-group>
                        <formNumberKeyboard v-else :formRef="formRef" name="costPrice2" label="成本"
                            v-model:keyValue="queryParams.costPrice2" placeholder="请输入"
                            :required="queryParams.cooperationMode2 == '供货'" :rules="[
                                {
                                    validator: validatorNumbercostPrice2,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey="." />
                        <formNumberKeyboard :formRef="formRef" v-if="queryParams.cooperationMode2 == '分佣'"
                            name="commission2" label="佣金" v-model:keyValue="queryParams.commission2" placeholder="请输入"
                            :required="queryParams.cooperationMode2 == '分佣'" :rules="[
                                { validator: validators2, message: '请输入佣金' },
                                {
                                    validator: validatorcommission2,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey=".">
                            %
                        </formNumberKeyboard>
                        <formNumberKeyboard :formRef="formRef" v-if="queryParams.cooperationMode2 == '分佣'"
                            name="brokerage2" label="补充佣金" v-model:keyValue="queryParams.brokerage2" placeholder="请输入"
                            :rules="[
                                {
                                    validator: validatorbrokerage2,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey=".">
                            %
                        </formNumberKeyboard>
                        <van-cell-group inset>
                            <van-field input-align="right" error-message-align="right" name="liveStreamingMechanism2"
                                label="机制" maxlength="12" v-model="queryParams.liveStreamingMechanism2"
                                :required="!!queryParams.cooperationMode2"
                                @input="(e) => { forbidRule(e, 'liveStreamingMechanism2', 'blank') }" placeholder="请输入"
                                :rules="[
                                    { validator: validators2, message: '请输入机制' },
                                ]" />
                        </van-cell-group>
                        <div class="del_jizhi_bt" @click="deleteMechanism(2)">
                            <div class="del_img"></div>
                            <div>删除机制</div>
                        </div>
                    </div>
                </messageBox>
                <div class="add_jizhi_bt" @click="addMechanism(3)" v-if="mechanismArr.length == 2">
                    <div class="add_img"></div>
                    <div>添加机制</div>
                </div>
                <messageBox class="mess_card mt-10" v-if="mechanismArr.indexOf(3) !== -1">
                    <template #titleBox>
                        <div class="message_title_box">
                            <div class="chilunimg"></div>
                            <div class="jz3_img"></div>
                        </div>
                    </template>
                    <div class="form_item">
                        <van-cell-group inset>
                            <van-field input-align="right" error-message-align="right" name="cooperationMode3"
                                label="合作方式" v-model="queryParams.cooperationMode3" is-link readonly placeholder="请选择"
                                @click="showCooperationMode3 = true" :rules="[
                                    { required: false, trigger: 'onBlur', message: '请选择合作方式' },
                                ]">
                                <template #input>
                                    <van-radio-group v-model="queryParams.cooperationMode3" direction="horizontal">
                                        <van-radio v-for="item in cooperationModeColumns" :key="item.value"
                                            :name="item.value">{{
                                                item.text }}</van-radio>
                                    </van-radio-group>
                                </template>
                            </van-field>
                        </van-cell-group>
                        <formNumberKeyboard :formRef="formRef" v-if="queryParams.cooperationMode3 == '分佣'" name="price3"
                            label="售价" v-model:keyValue="queryParams.price3" placeholder="请输入"
                            :required="queryParams.cooperationMode3 == '分佣'" :rules="[
                                { validator: validators3, message: '请输入售价' },
                                {
                                    validator: validatorNumber2,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey="." />
                        <van-cell-group inset v-if="queryParams.cooperationMode3 == '分佣'">
                            <van-field input-align="right" error-message-align="right" name="costPrice3" label="成本"
                                v-model="queryParams.costPrice3" readonly required placeholder="请输入" />
                        </van-cell-group>
                        <formNumberKeyboard v-else :formRef="formRef" name="costPrice3" label="成本"
                            v-model:keyValue="queryParams.costPrice3" placeholder="请输入"
                            :required="queryParams.cooperationMode3 == '供货'" :rules="[
                                {
                                    validator: validatorNumbercostPrice3,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey="." />
                        <formNumberKeyboard :formRef="formRef" v-if="queryParams.cooperationMode3 == '分佣'"
                            name="commission3" label="佣金" v-model:keyValue="queryParams.commission3" placeholder="请输入"
                            :required="queryParams.cooperationMode3 == '分佣'" :rules="[
                                { validator: validators3, message: '请输入佣金' },
                                {
                                    validator: validatorcommission2,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey=".">
                            %
                        </formNumberKeyboard>
                        <formNumberKeyboard :formRef="formRef" v-if="queryParams.cooperationMode3 == '分佣'"
                            name="brokerage3" label="补充佣金" v-model:keyValue="queryParams.brokerage3" placeholder="请输入"
                            :rules="[
                                {
                                    validator: validatorbrokerage3,
                                    message: '请输入正确内容：整数或者保留两位小数',
                                },
                            ]" extraKey=".">
                            %
                        </formNumberKeyboard>
                        <van-cell-group inset>
                            <van-field input-align="right" error-message-align="right" name="liveStreamingMechanism3"
                                label="机制" maxlength="12" v-model="queryParams.liveStreamingMechanism3"
                                :required="!!queryParams.cooperationMode3"
                                @input="(e) => { forbidRule(e, 'liveStreamingMechanism3', 'blank') }" placeholder="请输入"
                                :rules="[
                                    { validator: validators3, message: '请输入机制' },
                                ]" />
                        </van-cell-group>
                        <div class="del_jizhi_bt" @click="deleteMechanism(3)">
                            <div class="del_img"></div>
                            <div>删除机制</div>
                        </div>
                    </div>
                </messageBox>
                <!-- <van-cell-group inset>
                    <van-field input-align="right" error-message-align="right" name="ingredient" label="材质" :rules="[
                        { required: false, trigger: 'onBlur', message: '请输入材质名称' },
                    ]" v-model="queryParams.ingredient" placeholder="请输入" maxlength="50"
                        @input="(e) => { forbidRule(e, 'ingredient', 'emoji') }" />
                </van-cell-group> -->





                <div class="form_foot">
                    <van-button round block type="primary" native-type="submit" v-throttle:click>
                        确认送审
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
    <Point :show="isPoint" v-model:costPrice="queryParams.costPrice" v-model:costPrice2="queryParams.costPrice2"
        v-model:costPrice3="queryParams.costPrice3" :mechanismArr="mechanismArr" :data="queryParams"
        @clone="isPoint = false" />
</template>
<script setup lang="ts">
import formNumberKeyboard from "@/components/formNumberKeyboard/index.vue";
import PointButton from '@/views/addProduct/components/pointButton.vue'
import Point from '@/views/addProduct/components/point.vue'
import { computed, ref, watchEffect } from "vue";
import { useRoute, useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { loginStore } from "@/store/login";
import { showSuccessToast } from "vant";
import { getSupplierAddProducts, getDicts } from "@/api/productList";
import { getEnvValue } from "@/utils/index";
import { changeAudit } from "@/api/productList/index";
import UpLoadDom from '@/components/isImgPdf/upLoadDom.vue'
import { handleImageUpdate } from "@/utils/handleImageUpdate";
import messageBox from '@/views/productDetail/components/messageBox.vue'
const route = useRoute();
const router = useRouter();
const store = loginStore();
const { token } = storeToRefs(store);
/** 商品id */
const id = computed(() => {
    return route.query.id;
});
const queryParams = ref<any>({
    supplierName: "",
    specs: '',
    sellingPoints: '',
    // ingredient: '',

    cooperationMode: "",
    price: "",
    costPrice: "",
    commission: "",
    brokerage: "",

    cooperationMode2: "",
    price2: "",
    costPrice2: "",
    liveStreamingMechanism2: "",
    commission2: "",
    brokerage2: "",

    cooperationMode3: "",
    price3: "",
    costPrice3: "",
    liveStreamingMechanism3: "",
    commission3: "",
    brokerage3: "",

    tax: ''
})
const productImageList = ref<any[]>([]);
// 合作方式1
const showCooperationMode = ref(false);
// 合作方式2
const showCooperationMode2 = ref(false);
// 合作方式3
const showCooperationMode3 = ref(false);
// 合作方式column
const cooperationModeColumns = ref<any>([]);
// ref
const formRef = ref()
// 扣点弹框开关
const isPoint = ref(false)
// loading
const loadingShow = ref(true)
// 机制集合
const mechanismArr = ref([1])
// 机制1售价
const validatorNumber = (val) => /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
// 机制1成本
const validatorNumbercostPrice = (val) => {
    if (queryParams.value.cooperationMode == '分佣') {
        if (val) {
            return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
        } else {
            return true
        }
    } else if (queryParams.value.cooperationMode == '') {
        return true
    } else {
        return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    }
}
// 机制1佣金
const validatorcommission = (val) => /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
// 机制1补充佣金
const validatorbrokerage = (val) => {
    if (queryParams.value.cooperationMode == '分佣') {
        if (val) {
            return /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
        } else {
            return true
        }
    } else {
        return false
    }
}
// 机制2，3售价
const validators2 = (value) => {
    if (queryParams.value.cooperationMode2) {
        if (value) {
            return true
        } else {
            return false
        }
    } else {
        return true
    }
}
// 机制2，3售价
const validatorNumber2 = (val) => {
    if (val) {
        return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    } else {
        return true
    }
}
// 机制二机制三  分佣时非必填 为空时非必填 供货时必填
const validatorNumbercostPrice2 = (val) => {
    if (queryParams.value.cooperationMode2 == '分佣') {
        if (val) {
            return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
        } else {
            return true
        }
    } else if (queryParams.value.cooperationMode2 == '') {
        return true
    } else {
        return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    }
}
// 机制2，3佣金
const validatorcommission2 = (val) => {
    if (val) {
        return /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
    } else {
        return true
    }
}
// 机制3补充佣金
const validatorbrokerage2 = (val) => {
    if (queryParams.value.cooperationMode2 == '分佣') {
        if (val) {
            return /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
        } else {
            return true
        }
    } else {
        return false
    }
}
// 机制3售价佣金机制
const validators3 = (value) => {
    if (queryParams.value.cooperationMode3) {
        if (value) {
            return true
        } else {
            return false
        }
    } else {
        return true
    }
}
// 机制3成本
const validatorNumbercostPrice3 = (val) => {
    if (queryParams.value.cooperationMode3 == '分佣') {
        if (val) {
            return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
        } else {
            return true
        }
    } else if (queryParams.value.cooperationMode3 == '') {
        return true
    } else {
        return /(^(?!0\d)([1-9]\d{0,8}(\.\d{1,2})?|0(\.\d{1,2})?)$)/.test(val);
    }
}
// 机制3补充佣金
const validatorbrokerage3 = (val) => {
    if (queryParams.value.cooperationMode3 == '分佣') {
        if (val) {
            return /^(([1-9]?\d(\.\d{1,2})?)|100|100.00)$/.test(val);
        } else {
            return true
        }
    } else {
        return false
    }
}
// 限制必填情况下空格
const validSpace = (val) => {
    if (val) {
        return !/^[\s]*$/.test(val)
    } else {
        return false
    }
}
/** 删除 */
const deleteImg = (list: any, index: number) => {
    list.splice(index, 1);
};
/** 添加机制 */
const addMechanism = (index: number) => {
    mechanismArr.value.push(index)
}
/** 平台扣点 */
watchEffect(() => {
    if (queryParams.value.cooperationMode === '分佣') {
        let costPrice = Number(queryParams.value.price || 0) * (1 - ((Number(queryParams.value.commission || 0) / 100) + (Number(queryParams.value.brokerage || 0) / 100) + (Number(queryParams.value.tax || 0) / 100)))
        queryParams.value.costPrice = costPrice.toFixed(2)
    }
    if (queryParams.value.cooperationMode2 === '分佣') {
        let costPrice2 = Number(queryParams.value.price2 || 0) * (1 - ((Number(queryParams.value.commission2 || 0) / 100) + (Number(queryParams.value.brokerage2 || 0) / 100) + (Number(queryParams.value.tax || 0) / 100)))
        queryParams.value.costPrice2 = costPrice2.toFixed(2)
    }
    if (queryParams.value.cooperationMode3 === '分佣') {
        let costPrice3 = Number(queryParams.value.price3 || 0) * (1 - ((Number(queryParams.value.commission3 || 0) / 100) + (Number(queryParams.value.brokerage3 || 0) / 100) + (Number(queryParams.value.tax || 0) / 100)))
        queryParams.value.costPrice3 = costPrice3.toFixed(2)
    }
})
/** 删除机制 */
const deleteMechanism = (index: number) => {
    // 当机制二删除并且机制三也存在得情况 删除机制三 保留机制二
    if (index == 2 && mechanismArr.value.length == 3) {
        mechanismArr.value.splice(2, 1)
        queryParams.value.cooperationMode2 = queryParams.value.cooperationMode3
        queryParams.value.price2 = queryParams.value.price3
        queryParams.value.costPrice2 = queryParams.value.costPrice3
        queryParams.value.liveStreamingMechanism2 = queryParams.value.liveStreamingMechanism3
        queryParams.value.commission2 = queryParams.value.commission3
        queryParams.value.brokerage2 = queryParams.value.brokerage3

        queryParams.value.cooperationMode3 = ""
        queryParams.value.price3 = ""
        queryParams.value.costPrice3 = ""
        queryParams.value.liveStreamingMechanism3 = ""
        queryParams.value.commission3 = ""
        queryParams.value.brokerage3 = ""
    } else {
        let indexs = mechanismArr.value.indexOf(index)
        mechanismArr.value.splice(indexs, 1)
        if (index == 2) {
            queryParams.value.cooperationMode2 = ""
            queryParams.value.price2 = ""
            queryParams.value.costPrice2 = ""
            queryParams.value.liveStreamingMechanism2 = ""
            queryParams.value.commission2 = ""
            queryParams.value.brokerage2 = ""
        } else if (index == 3) {
            queryParams.value.cooperationMode3 = ""
            queryParams.value.price3 = ""
            queryParams.value.costPrice3 = ""
            queryParams.value.liveStreamingMechanism3 = ""
            queryParams.value.commission3 = ""
            queryParams.value.brokerage3 = ""
        }
    }
}
/** 获取详情 */
const getDetail = async () => {
    loadingShow.value = true
    const res = await getSupplierAddProducts(id.value as any);

    if (res.data.productImage) {
        const real_src = res.data.productImage.split(",");
        fetchImagesSequentially(real_src, productImageList.value);
    } else {
        res.data.productImage = "";
    }
    mechanismArr.value = []
    res.data.hmMechanismsList.forEach((element, index) => {
        if (element.cooperationMode) {
            mechanismArr.value.push(index + 1)
        }
    });

    // 机制1
    res.data.cooperationMode = res.data.hmMechanismsList[0].cooperationMode
    res.data.price = res.data.hmMechanismsList[0].price
    res.data.costPrice = res.data.hmMechanismsList[0].costPrice
    res.data.commission = res.data.hmMechanismsList[0].commission
    res.data.brokerage = res.data.hmMechanismsList[0].brokerage
    res.data.liveStreamingMechanism = res.data.hmMechanismsList[0].liveStreamingMechanism
    // 机制2
    res.data.cooperationMode2 = res.data.hmMechanismsList[1].cooperationMode
    res.data.price2 = res.data.hmMechanismsList[1].price
    res.data.costPrice2 = res.data.hmMechanismsList[1].costPrice
    res.data.commission2 = res.data.hmMechanismsList[1].commission
    res.data.brokerage2 = res.data.hmMechanismsList[1].brokerage
    res.data.liveStreamingMechanism2 = res.data.hmMechanismsList[1].liveStreamingMechanism
    // 机制3
    res.data.cooperationMode3 = res.data.hmMechanismsList[2].cooperationMode
    res.data.price3 = res.data.hmMechanismsList[2].price
    res.data.costPrice3 = res.data.hmMechanismsList[2].costPrice
    res.data.commission3 = res.data.hmMechanismsList[2].commission
    res.data.brokerage3 = res.data.hmMechanismsList[2].brokerage
    res.data.liveStreamingMechanism3 = res.data.hmMechanismsList[2].liveStreamingMechanism

    queryParams.value = res.data;
    loadingShow.value = false
}
getDetail();
/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src, productImageList) => {
    for (const item of real_src) {
        productImageList.push({
            url: getEnvValue("VITE_APP_PIC_URL") + item
        });
    }
};
// 输入事件、禁用规则
const forbidRule = (e: any, key: string, type: string) => {
    // 输入法表情默认不能输入
    if (type == 'emoji') {
        // emoji：输入时禁用输入法表情
        queryParams.value[key] = e.target.value.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
    } else if (type == 'blank') {
        // blank：输入时禁用空格
        queryParams.value[key] = e.target.value.replace(/\s|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\u00A9|\u00AE|\u3030/gi, '')
    }
}
/** 合作方式 */
const getcooperationMode = async () => {
    const res = await getDicts("hm_cooperation_mode");
    res.data.forEach((element) => {
        element.text = element.dictLabel;
        element.value = element.dictValue;
    });
    cooperationModeColumns.value = res.data;
};
getcooperationMode();
const postImage = (name: string, count: number) => {
    (window as any).uni.webView.postMessage({
        data: {
            type: "img",
            count: count,
            name: name,
            url: getEnvValue("VITE_APP_UPLOAD_API") + '/resource/oss/upload',
            header: {
                Authorization: `Bearer ${token.value}`,
                clientid: "e5cd7e4891bf95d1d19206ce24a7b32e",
            },
        },
    });
};
(window as any).msgFromUniapp = function (arg) {
    const imageLists = {
        productImage: productImageList.value,
    };

    const maxCounts = {
        productImage: 5,
    };

    const imageList = imageLists[arg.name];
    const maxCount = maxCounts[arg.name];

    handleImageUpdate(imageList, arg, maxCount);

};
// 提交
const onSubmit = async () => {
    if (queryParams.value.cooperationMode == "供货") {
        delete queryParams.value.price;
        delete queryParams.value.commission
        delete queryParams.value.brokerage
    }
    if (queryParams.value.cooperationMode2 == "供货") {
        delete queryParams.value.price2;
        delete queryParams.value.commission2
        delete queryParams.value.brokerage2
    }
    if (queryParams.value.cooperationMode3 == "供货") {
        delete queryParams.value.price3;
        delete queryParams.value.commission3
        delete queryParams.value.brokerage3
    }
    let arr = [
        {
            cooperationMode: queryParams.value.cooperationMode,
            price: queryParams.value.price,
            costPrice: queryParams.value.costPrice,
            liveStreamingMechanism: queryParams.value.liveStreamingMechanism,
            commission: queryParams.value.commission,
            brokerage: queryParams.value.brokerage
        },
        {
            cooperationMode: queryParams.value.cooperationMode2,
            price: queryParams.value.price2,
            costPrice: queryParams.value.costPrice2,
            liveStreamingMechanism: queryParams.value.liveStreamingMechanism2,
            commission: queryParams.value.commission2,
            brokerage: queryParams.value.brokerage2
        },
        {
            cooperationMode: queryParams.value.cooperationMode3,
            price: queryParams.value.price3,
            costPrice: queryParams.value.costPrice3,
            liveStreamingMechanism: queryParams.value.liveStreamingMechanism3,
            commission: queryParams.value.commission3,
            brokerage: queryParams.value.brokerage3
        }
    ]
    let obj = {
        productId: queryParams.value.id,
        styleName: queryParams.value.styleName,
        sellingPoints: queryParams.value.sellingPoints,
        specs: queryParams.value.specs,
        // ingredient: queryParams.value.ingredient,
        changeMechanismList: arr,
        productImage: getPicByfullPath(productImageList.value)
    }
    await changeAudit(obj)
    showSuccessToast({ type: "success", message: "送审成功" });
    setTimeout(() => {
        router.back();
    }, 1000);
}
/**
 * 图片全路径转半路径
 * @param list 
 */
const getPicByfullPath = (list: any[]) => {
    if (list.length > 0) {
        const updatedList = list.map((item: any) => {
            return item.url.split(getEnvValue("VITE_APP_PIC_URL"))[1];
        });
        return updatedList.join(',');
    } else {
        return '';
    }
}
/** 回退 */
const handleLeft = () => {
    router.back();
};

</script>
<script lang="ts">
export default { name: 'mechanismPriceChange' }
</script>
<style lang="less" scoped>
.mechanismPriceChange {
    width: 100%;
    // height: 100vh;
    background: #f6faff;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-content: flex-start;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;
        width: 100%;
        position: fixed;
        z-index: 6003;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .add_product {
        background-color: #f6faff;
        width: 100%;
        height: calc(100vh - 90px);
        box-sizing: border-box;
        padding: 0px 15px 94px 15px;
        margin-top: 90px;
        overflow-y: scroll;

        .investmentReview_loading {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;

            .investmentReview_loading_title {
                color: #c8c9cc;
                margin-left: 5px;
            }
        }

        .mechanism_title {
            // width: 100%;
            font-weight: 600;
            font-size: 14px;
            color: #1A1B1C;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 10px 15px 10px 15px;

            .delete_mechanism {
                width: 128px;
                height: 34px;
                border-radius: 22px;
                border: 1px solid #FC2540;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 400;
                font-size: 14px;
                color: #FC2540;

                .van-image {
                    width: 14px;
                    height: 14px;
                }
            }
        }

        .add_mechanism {
            width: 128px;
            height: 34px;
            border-radius: 22px;
            border: 1px solid #0094FF;
            display: flex;
            justify-content: center;
            align-items: center;
            font-weight: 400;
            font-size: 14px;
            color: #0094FF;
            margin: auto;
            margin-bottom: 10px;

            .van-image {
                width: 14px;
                height: 14px;
            }
        }

    }
}

:deep(.van-cell-group--inset) {
    margin: 0 !important;
    border-radius: 0 !important;
}

:deep(.van-form) {
    background-color: #fff;
    // padding-bottom: 35px !important;
}

:deep(.van-field__label) {
    color: #464E5D !important;
    width: 100px !important;
}

:deep(.van-field__control) {
    color: #b8beca !important;
}

:deep(.van-icon-arrow:before) {
    color: #b8beca !important;
}

:deep(.van-field__label--required) {
    &::before {
        display: none;
    }

    &::after {
        color: var(--van-field-required-mark-color);
        content: "*";
    }
}

:deep(.van-field--disabled) {
    background-color: #f3f3f3;

    .van-field__control {
        color: #8492AD !important;
        -webkit-text-fill-color: #8492AD !important;
    }

    div[aria-checked=true] .van-radio__icon {
        color: #0094FF !important;
        -webkit-text-fill-color: #0094FF !important;
    }
}

.image-title {
    font-weight: 400;
    font-size: 14px;
    color: #1a1b1c;
    background-color: #fff;
    padding-left: 16px;
    padding-top: 20px;
}

:deep(.van-cell:after) {
    border: none !important;
}

.value {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .imgList {
        position: relative;

        .loading_pic {
            width: 90px;
            height: 90px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        :deep(.van-image__img) {
            margin-right: 5px;
        }

        :deep(.van-icon) {
            position: absolute;
            top: 0;
            z-index: 100;
            right: 5px;
            font-size: 10px;
            height: 15px;
            width: 15px;
            background-color: #000;
            border-bottom-left-radius: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        :deep(.van-icon-cross:before) {
            margin: 0 0 1px 2px;
        }
    }

    :deep(.van-image__img) {
        width: 77px;
        height: 77px;
    }
}

.form_item {
    :deep(.van-cell) {
        padding: 20px 15px;
        position: relative;

        &::after {
            content: "";
            display: block;
            height: 2px;
            width: 315px;
            background-color: #F3F3FF;
        }


    }

    :deep(.van-cell-group):last-child {

        .van-cell {
            border-bottom: none !important;
        }

    }

    :deep(.van-field__label) {

        color: #464E5D !important;
    }

    :deep(.van-field__label--required) {
        &::before {
            display: none;
        }

        &::after {
            color: var(--van-field-required-mark-color);
            content: "*";
        }
    }
}

.mess_card {
    border-radius: 5px;
    overflow: hidden;

}

.mt-10 {
    margin-top: 10px
}

.message_title_box {
    background: linear-gradient(270deg, #FFFFFF 0%, #CDECFF 100%);
    height: 46px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    padding: 4px;
    display: flex;
    align-items: center;

    .chilunimg {
        width: 46px;
        height: 37px;
        background: url("@/assets/newui/form/icon_jizhitubiao.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 10px;
        transform: scale(0.68);
    }

    .jz1_img {
        width: 54px;
        height: 16px;
        background: url("@/assets/newui/details/icon_jizhiyilan@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .jz2_img {
        width: 54px;
        height: 16px;
        background: url("@/assets/newui/details/icon_jizhierlan@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .jz3_img {
        width: 54px;
        height: 16px;
        background: url("@/assets/newui/details/icon_jizhisanlanse@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
}

.add_jizhi_bt {
    width: 128px;
    height: 34px;
    background: #F6FAFF;
    border-radius: 22px;
    border: 1px solid #0094FF;
    margin: 0 auto;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #0094FF;
    line-height: 14px;

    .add_img {
        width: 14px;
        height: 14px;
        background: url("@/assets/newui/form/icon_tianjia.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 9px;
    }
}

.del_jizhi_bt {
    width: 128px;
    height: 34px;
    background: #F6FAFF;
    border-radius: 22px;
    border: 1px solid #FC2540;
    margin: 0 auto;
    margin-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    color: #FC2540;
    line-height: 14px;
    margin-bottom: 10px;

    .del_img {
        width: 14px;
        height: 14px;
        background: url("@/assets/newui/form/icon_shanchu.svg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-right: 9px;
    }
}

:deep(.van-form) {
    background-color: #ffffff00;
}

:deep(.card_content_box) {
    padding: 0;
}

.card_box {
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;

}

.form_foot {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 84px;
    background: #FFFFFF;
    box-shadow: 0px 0px 8px 0px rgba(189, 195, 204, 0.5);
    box-sizing: border-box;
    padding: 20px 15px;
    z-index: 110;
}
</style>